<style scoped>
  .operatingRecord {
    margin-right: 0.5vw;
    padding: 0 15px;
    background-color: white;
    height: 95vh;
    position: relative;
  }
  .top_msg{
    padding: 1.5vh;
    border-bottom: 2px solid #f4f4f4;
    white-space:nowrap;
  }
  .top_msg p{
    display: inline-block;
    width: 75px;
    text-align: right;
    line-height: 30px;
  }
  
  .top_msg input:last-child{
    width: 390px;
  }
  .t_content{
    margin: 0 10px 0 8px;
    padding-top: 3px;
    }
    .t_content1{
      padding-top: 3px;
      margin: 0 6px 0 0;
    }
  .operatingRecord input:focus{
    outline: none;
    border: 1px solid #017aff;
  }
  .inp{
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    height: 30px;
    padding: 0 15px;
  }
  .a_color{
    color: #017aff;
  }
  .vendorSales_c{
    display: flex;
    width: 100%;
    height: 82%;
  }
  .content1{
    width: 50%;
    border-right: 2px solid #f4f4f4;
    padding:2px 10px 0 0;
  }
  .content2{
    width: 50%;
    padding-left: 10px;
  }
  .check{
    width: 90px;
    height: 40px;
    border: 1px solid #d3cdcd;
    border-radius: 5px;
    padding: 8px 0 0 7px;
  }
  .c2_button{
    height: 25px;
    margin: 8px 5px 0 35px;
  }
  .c2_button1{
    height: 25px;
    margin: 8px 5px 0 0;
  }
  .content2_1{
    margin-top: 3px;
  }
  .date_1{
    margin: 3px 6px 0 0;
  }
  .remarks_1{
    margin:3px 6px 0 45px;
  }
  .footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }
  .footView span i{
    margin-right: 5px;
  }
  ._content{
    width: 100%;
    margin: 1.5vh 0;
  }

</style>

<style>
  .operatingRecord .el-input__icon{
    line-height: 22px;
  }
  .operatingRecord .c_b .el-button{
    padding: 0;
  }
  .operatingRecord .top_msg input{
    width: 160px;
  }
  .operatingRecord .top_msg .el-date-editor.el-input__inner{
    width: 370px;
    height: 30px;
  }
  .operatingRecord .el-date-editor .el-range-separator {
    line-height: 22px;
    width: 10%;
  }
</style>


<template>
  <div class="operatingRecord">
    
    <div class="top_msg">
      <p class="t_content">单据序号</p>
      <input class="inp inp2" type="text" v-model="sequence">

      <p class="t_content">操作员</p>
      <input class="inp inp2" type="text" v-model="operater">

      <p class="t_content1">销货日期</p>
      <!-- <div class="block"> -->
        <el-date-picker
          unlink-panels
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dateList"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

    <div class="_content">
      <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
    </div>

    <div class="vendorSales_c">
      <div class="content1">
        <div class="c_tab">
          <el-table
            :data="tableData1"
            style="width: 100%"
            height="75vh"
            highlight-current-row
            show-summary
            ref="table"
            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
            :cell-style="{padding:0,height:'36px'}">
            <el-table-column
              prop="sequenceTime"
              label="日期">
            </el-table-column>
            <el-table-column
              prop="sequence"
              label="单据序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="number"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="money"
              label="金额">
            </el-table-column>
            <el-table-column
              prop="operator"
              label="操作员">
            </el-table-column>
            <el-table-column
              prop="operatingStatus"
              label="状态">
            </el-table-column>
            <el-table-column
              prop="enteringTime"
              label="状态日期">
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="content2">
        <div class="content2_1">
          <el-table
            :data="tableData2"
            style="width: 100%"
            height="75vh"
            highlight-current-row
            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
            :cell-style="{padding:0,height:'36px'}">
            <el-table-column
              prop="sequence"
              label="单据序号"
              width="170">
            </el-table-column>
            <el-table-column
              prop="kindsNumber"
              label="货号"
              width="170">
            </el-table-column>
            <el-table-column
              prop="rfidShowCode"
              label="ID"
              width="170">
            </el-table-column>
            <el-table-column
              prop="number"
              label="数量"
              width="80">
            </el-table-column>
            <el-table-column
              prop="sellingPrice"
              label="售价">
            </el-table-column>
            <el-table-column
              prop="money"
              label="金额">
            </el-table-column>
            <el-table-column
              prop="no"
              label="往来编号"
              width="80">
            </el-table-column>
          </el-table>
        </div>
      </div>

    </div>

    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
        <!-- <span>记录数：500</span> -->
      </div>
    </foot-view>

  </div>
</template>

<script>
import { getList } from '../../../network/operatoryCommand'

import footView from '../../../components/FootView'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'

export default {
  mixins: [today,enterUp],
  created(){
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    this.inpList = this.getInput()
    // 默认选之前一周
    this.dateList = [this.getLastWeek(),this.getNowTime()]
  },
  data(){
    return{
      inpList: [],
      dateList: null,
      sequence: '',
      operater: '',
      tableData1: [],
      tableData2: [],
      jxQuarter: null
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
    }
  },
  watch: {
    sequence(a,b){
      this.sequence = a.toUpperCase().trim()
    },
    operater(a,b){
      this.operater = a.toUpperCase().trim()
    }
  },
  components: {
    footView,
  },
  methods: {
    search(){
      getList({
        sequence: this.sequence,
        operater: this.operater,
        startTime: this.dateList ? this.dateList[0] : null,
        endTime: this.dateList ? this.dateList[1] : null
      }).then(res => {
        this.tableData2 = res.data.data.infoList
        this.tableData1 = res.data.data.totalList
        this.tableData1.forEach(e => {
          e.enteringTime = e.enteringTime.slice(0,10)
          e.sequenceTime = e.sequenceTime.slice(0,10)
        })
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      })
    }
  }
}
</script>